<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="800" height="800">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);
    pen.beginPath();
    pen.rect(100,100,100,100);
    pen.scale(1.5,1.5);
    pen.rect(100,100,100,100);
    pen.stroke();
    pen.closePath();

    pen.beginPath();
    pen.arc(300,300,50,0,Math.PI*2,true);
    pen.closePath();
    pen.stroke();
    pen.beginPath();
    pen.scale(1.1,1.1);
    pen.arc(300,300,50,0,Math.PI*2,true);
    pen.closePath();
    pen.stroke();



</script>
</body>
</html>